<template>
  <view>
    <button @click="clickChooseImage()">选择照片</button>
    <image :src="resImage" class="image" mode="widthFix" @click="previewImage(index)"></image>
    <canvas canvas-id="firstCanvas" class="canvas" :style="'width:'+canvasW+'px;height: '+canvasH+'px'" />
  </view>
</template>

<script>
  import {
    navTo
  } from '../utils/util';
  export default {
    data() {
      return {
        resImage: "",
        canvasW: 0,
        canvasH: 0
      }
    },
    onLoad() {

    },
    methods: {
      clickChooseImage() { // 选择图片
        uni.chooseImage({
          count: 1, // 限制的图片数量
          sourceType: ['camera'], // album 从相册选图，camera 使用相机，默认二者都有
          success: async (res) => {
            let path = await this.addWaterMark(res.tempFilePaths[0]);
            console.log(path)
            this.resImage = path
          },
          fail: (err) => {
            console.log('chooseImage fail', err)
          }
        })
      },
      // 添加水印
      addWaterMark(path) {
        uni.getImageInfo({
          src: path,
          success: res => {
            let ctx = uni.createCanvasContext('firstCanvas');
            //设置画布宽高
            this.canvasW = res.width
            this.canvasH = res.height
            ctx.drawImage(path, 0, 0, res.width, res.height)
            //水印框的大小
            let w = this.canvasW - 50
            let h = 180
            //水印框左上角坐标
            let x = 30
            let y = res.height - 210
            //圆角半径
            let r = 20
            let checkType = "检查类型: 常规检查"
            let police = "检查民警:王x1"
            let policeNumber = "警    号:"
            let auxiliaryPolice = "辅    警:"
            let inspectEnterprise = '检查企业:大大检查时间: 2024/11/14 '
            let address = '检查地点:陕西省西安市碑林区火炬路7号靠近东新世纪广场'
            let lnglat = '经 纬 度:109.003604 34.248514'
            ctx.beginPath()
            // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
            ctx.setFillStyle('transparent')
            // 左上角
            ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

            // border-top
            ctx.moveTo(x + r, y)
            ctx.lineTo(x + w - r, y)
            ctx.lineTo(x + w, y + r)
            // 右上角
            ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

            // border-right
            ctx.lineTo(x + w, y + h - r)
            ctx.lineTo(x + w - r, y + h)
            // 右下角
            ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

            // border-bottom
            ctx.lineTo(x + r, y + h)
            ctx.lineTo(x, y + h - r)
            // 左下角
            ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

            // border-left
            ctx.lineTo(x, y + r)
            ctx.lineTo(x + r, y)

            // 这里是使用 fill 或者 stroke都可以
            ctx.fill()
            // ctx.stroke()
            ctx.closePath()
            // 剪切
            ctx.clip()
            ctx.setFillStyle('rgba(0, 0,0, 0.3)')
            ctx.fillRect(x, y, w, h)

            //字体加粗真机不起作用?
            //ctx.font = "normal bold 50px Arial"
            ctx.setFontSize(14); // 设置字体大小
            ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
            ctx.fillText(checkType, x + 30, y + 23);

            ctx.setFontSize(14); // 设置字体大小
            ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
            ctx.fillText(police, x + 30, y + 23 + 23 * 1);

            ctx.setFontSize(14); // 设置字体大小
            ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
            ctx.fillText(policeNumber, x + 30, y + 23 + 23 * 2);

            ctx.setFontSize(14); // 设置字体大小
            ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
            ctx.fillText(auxiliaryPolice, x + 30, y + 23 + 23 * 3);

            ctx.setFontSize(14); // 设置字体大小
            ctx.setFillStyle('#fff')
            ctx.fillText(inspectEnterprise, x + 30, y + 23 + 23 * 4);

            ctx.setFontSize(14); // 设置字体大小
            ctx.setFillStyle('#fff')
            ctx.fillText(address, x + 30, y + 23 + 23 * 5);

            ctx.setFontSize(14); // 设置字体大小
            ctx.setFillStyle('#fff')
            ctx.fillText(lnglat, x + 30, y + 23 + 23 * 6);

            ctx.draw(false, () => {
              uni.showLoading({
                title: '正在生成水印照片'
              })
              uni.canvasToTempFilePath({
                canvasId: 'firstCanvas',
                destWidth: this.canvasW, //展示图片尺寸=画布尺寸1*像素比2
                destHeight: this.canvasH,
                success: res1 => {
                  uni.hideLoading()
                  this.resImage = res1.tempFilePath
                }
              });
            })
          }
        })
      },
      previewImage() {
        uni.previewImage({
          urls: [this.resImage],
        })
      },
      handleStartCheck() {
        navTo({
          url: 'venueInspection/inspectionContent'
        })
      }
    }
  }
</script>

<style>
  .image {
    width: 300rpx;
    height: 300rpx;
    margin: 10rpx;
  }

  .canvas {
    position: absolute;
    top: -999999rpx;
    width: 100%;
  }
</style>